<!-- 报修工作人员工单反馈界面 -->
<template>
	<view>
		<!-- 工单详情列表表单项 -->
		<view class="content">
			<view class="content-top">
				回单信息
			</view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderID.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderID.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderWorkers.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderWorkers.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderWorkers_phone.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderWorkers_phone.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderPlace.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderPlace.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-item-title">
					{{contentItems.orderFeedbackTime.name}}
				</view>
				<view class="content-item-detial">
					{{contentItems.orderFeedbackTime.value}}
				</view>
			</view>
			<view class="cross-line"></view>
			<view class="content-item">
				<view class="content-feedbackContent-title">
					{{contentItems.orderFeedbackContent.name}}
				</view>
				<view class="content-feedbackContent-detial">
					<textarea value="" placeholder="请描述处理方法..." />
				</view>
			</view>
		</view>
		<!-- 工单底部的工作人员的填写反馈项 -->
		<view class="bottom">
			<view class="orderCancel" @click="cancel()">
				取消
			</view>
			<view class="orderAccept" @click="submit()">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentItems: {
					orderID: {
						name: "工单编号",
						value: "202112042154622"
					},
					orderWorkers: {
						name: "维修人员",
						value: "谷崎丰"
					},
					orderWorkers_phone: {
						name: "联系方式",
						value: "13968083789"
					},
					orderPlace: {
						name: "维修地点",
						value: "西苑13号楼 423室"
					},
					orderFeedbackTime: {
						name: "回单时间",
						value: ""
					},
					orderFeedbackContent: {
						name: '回单内容',
						value: {
							textContent: ''
						}
					}
				}

			}
		},
		onLoad() {
			var that = this;
			that.contentItems.orderFeedbackTime.value = this.getTime();
		},
		methods: {
			getTime: function() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				return timer;
			},
			cancel() {
				uni.showModal({
					title: '提示',
					content: '是否确定取消回单',
					success: function(res) {
						if (res.confirm) {
							uni.showToast({
								title: '用户点击确定',
								duration: 1000
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '用户点击取消',
								duration: 1000
							})
						}
					}
				})
			},
			submit() {
				uni.showModal({
					title: '提示',
					content: '是否提交回单',
					success: function(res) {
						if (res.confirm) {
							uni.showToast({
								title: '提交工单成功',
								duration: 1000
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #f2f3f2;
	}

	.content-top {
		padding: 20rpx;
		font-size: 34rpx;
		font-weight: bold;
	}

	.content-item {
		background-color: white;
		display: flex;
		padding: 20rpx;
	}

	.content-item-title {
		width: 200rpx;
	}

	.content-feedbackContent-title {
		width: 200rpx;
	}

	.content-feedbackContent-detial {
		width: 550rpx;
		height: 250rpx;
		margin-bottom: 30rpx;
	}

	.content-feedbackContent-detial textarea {
		width: 94%;
		height: 100%;
		border-radius: 10rpx;
		background-color: #f2f3f2;
		padding: 14rpx;
	}

	.content-item-detial {
		flex: 1;
	}

	.cross-line {
		width: 100%;
		background: #f0f1f0;
		height: 2rpx;
	}

	.bottom {
		background-color: #f2f3f2;
		width: 100%;
		height: 300rpx;
		padding-top: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		/**内容居中*/
	}

	.orderCancel,
	.orderAccept {
		width: 300rpx;
		height: 80rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/**子view垂直居中*/
		vertical-align: center;
		/**垂直居中*/
		color: white;
		font-size: 34rpx;
		font-weight: 500;
	}

	.bottom {
		background-color: #f2f3f2;
		width: 100%;
		height: 300rpx;
		padding-top: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		/**内容居中*/
	}

	.orderCancel,
	.orderAccept {
		width: 300rpx;
		height: 80rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/**子view垂直居中*/
		vertical-align: center;
		/**垂直居中*/
		color: white;
		font-size: 34rpx;
		font-weight: 500;
	}

	.orderCancel {
		background-color: #FEC760;
	}

	.orderAccept {
		background-color: #2F9BFE;
	}
</style>
